<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏</title>
		<style>
			*{
				font: 16px "微软雅黑";
				/*去掉无序列表样式 针对一项列表项标记*/
				list-style-type: none;
				/*去掉无序列表样式  针对三项 ①列表项标记  list-style-type
				                           ②列表项位置  list-style-position
				                           ③列表项图片  list-style-image
										所有的效果，去掉样式   
				*/
				list-style: none;
				/*去掉内外边距  ul  li存在外边距*/
				margin: 0;
				padding: 0;
			}
			aside{
				width: 255px;		
				height: 530px;
				background: #c1c1c1;
				/*盒子模型：外边距*/
				mar gin: 30px 200px;
			}
					
					 aside ul.ul_sidebar li{
						 width: 255px;
						 height: 50px;
						 text-align: left;
						 line-height: 50px;
						 /*挂靠点【固定】使用相对定位*/
						 position: relative;
						 top: 15px;
					 }
					aside ul.ul_sidebar li:hover{
						 background: #919191;
					 }
					 /*挂靠位【活动】  使用绝对定位，按照父级位置定位*/
					 aside ul.ul_sidebar div.out{
						 width: 400px;
						 height: 530px;
						 border: 1px solid red;
						 /*绝对定位*/
						 position: absolute;
						 left: 260px;
						 /*默认隐藏 搞不定【jQuery】*/
						 display: none;
					 }
					 /*新增样式*/
					 aside ul.ul_sidebar li span{
						float: right;
						padding-right: 20px;
					 }
					 aside ul.ul_sidebar li{
						float: right;
					 }
					 
				 </style>
				 <script src="js/jquery-1.11.1.js"></script>
				
	</head>
	<body>
		<!--html结构：外层div .sidebar
		    html结构标记：aside元素，语义化元素，表示：左栏、侧边栏、广告
			有利于
			           通常代替div+id/class语义化元素
		
		            内层ul.ul_sidebar li*10
					内容参照京东左栏第一个
		css结构：内部引入方式
				通配选择器---合理添加	
				外层aside 235p*460    背景色
				内层每个li加宽高   235*46
				内层文本垂直居中对齐，文字：16px
				鼠标移动上去li，背景色改变
					-->
				<aside>
					<ul class="ul_sidebar">
						<!--弹出框,模式：div+别名-->
						<div class="out"></div>
						<li>手机 平板 电话卡<span>></span></li>
						<li>电视 盒子<span>></span></li>
						<li>路由器 智能硬件<span>></span></li>
						<li>移动电源 插线板<span>></span></li>
						<li>耳机 音箱<span>></span></li>
						<li>电池 存储卡<span>></span></li>
						<li>保护套 后盖<span>></span></li>
						<li>贴膜 其他配件<span>></span></li>
						<li>米兔 服装<span>></span></li>
						<li>箱包 其他周边<span>></span></li>
					</ul>
				</aside>	
				<script>
					/*左栏实现：1.添加事件 li  2.切换效果  3.切换效果*/
					$("aside ul.ul_sidebar li").hover(function(){
						//弹出框 默认隐藏 --抓弹出框  第一件事   显示
						$("aside ul.ul_sidebar div.out").css("display","block");
					},function(){
						$("aside ul.ul_sidebar div.out").css("display","none");
					});
				</script>
	</body>
</html>
<!--   css  悬停效果    效果不能实现：不能切换
       jq   悬停效果事件源    hover   切换效果问题
	   语法：$("选择器").hover(function(){第一件事},function(){第二件事})
-->